﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Effects - Custom</title>
    <script src="script/jquery-1.3.2.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("#go1").click(function() {
                $("#block1").animate({ width: "90%" }, { queue: false, duration: 3000 })
             .animate({ fontSize: "24px" }, 1500)
             .animate({ borderRightWidth: "15px" }, 1500);
            });

            $("#go2").click(function() {
                $("#block2").animate({ width: "90%" }, 1000)
             .animate({ fontSize: "24px" }, 1000)
             .animate({ borderLeftWidth: "15px" }, 1000);
            });

            $("#go3").click(function() {
                $("#go1").add("#go2").click();
            });

            $("#go4").click(function() {
                $("div").css({ width: "", fontSize: "", borderWidth: "" });
            }); 
        });  
    </script>
</head>
<body>
    <button id="go1">&raquo; Animate Block1</button> 
    <button id="go2">&raquo; Animate Block2</button> 
    <button id="go3">&raquo; Animate Both</button> 

    <button id="go4">&raquo; Reset</button> 
    <div id="block1">Block1</div> 
    <div id="block2">Block2</div>
</body>
</html>
